﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
    1.DOCTYPE字符编码简略
		2.标签不分大小写
		3.标签属性布尔值可以省略
		4.语义化标签：
      <section>划分内容区块</section>
      <header>头部：导航+banner</header>
      <footer>尾部</footer>
      <nav>导航</nav>
      <main>主体内容</main>
      <article>独立内容，一篇文章</article>
      <aside>文章内的广告区域，侧边栏</aside>
      <figure>文章的插画
        <!-- <img src="..."> -->
        <figcaption>文章的插画下的文字说明</figcaption>
      </figure>
      
    标记标签：
      <mark>高亮显示的文本</mark>
      <time>日期文本</time>
      <hr>分割线

    条件注释严格区分大小写
    <!--[if lt IE 9]>
      <script src="html5.min.js"></script>
    <![endif]-->
    
    input新属性 <input type=" ">
      search 搜索
      email 邮箱
      tel 电话
      number 数字     (step="0.1"点击箭头的步长)
      range 滑动条    (step=1步长属性)
      color 选择颜色  (获取元素后.value得到16进制值)
      url 网址
      datetime 完整日期时间 utc
      datetime-local 完整日期时间
      time 时间
      month 月
      week 周

      placeholder 提示
      autocomplete 保存输入值(on/off)
      autofocus 自动焦点
      required 必填
      pattern 正则验证"\d{2}"

      <form id="form1"></form>
      <input form="form1">这个input可以在页面任意位置，都会提交到form表单里
      <form novalidate></form>这个表单里的都不需要验证
      <input type="submit" formnovalidate>加在提交按钮上也不会验证

      <form>
        <input type="text" name="text" pattern="\d{2}" id="text">
        <input type="submit" value="提交1">
      </form>
      
    <script>
      var oText = document.querySelector('#text');
      oText.addEventListener('invalid',fn,false);
      function fn(){
        console.log(this.validity)
        // valid 验证不通过
        // valueMissing 输入为空
        // typeMismatch 值与类型不匹配
        // patternMismatch 正则不匹配
        // customError 不符合自定义验证
        // setCustomValidity 自定义验证
        if(this.validity.patternMismatch){
          //需要配合pattern属性使用
          this.setCustomValidity("只能输入两位数")//自定义错误提示
        }else{
          this.setCustomValidity("")
        }
      }
    </script>
	</body>
</html>
